<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="user-area">
      <div class="title">
        <div class="point"></div>
        <span>品牌配置</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>品牌名称</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-model="brand.name"
                    size="small"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>品牌图片</span>
          </div>
        </el-col>
        <el-col :span="7">
          <pic-view :file-list="brand.brandPicUrlList"
                    upload-class="short-upload"
                    :pic-name-list.sync="brand.brandPicNameList"
                    :max-size="1"
                    :upload-data="{ fileName: 'brand' }"
                    @showImg="showImg"></pic-view>
        </el-col>
      </el-row>
      <div class="foot">
        <el-button @click="setBrand"
                   type="primary">确定</el-button>
        <el-button @click="() => {this.$router.go(-1)}"
                   type="primary">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style>
</style>

<script>
import '@/style/info.scss'
import { api } from '@/api'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { validatenull } from '@/utils/validate'
import { packageImgList } from '@/utils/imgPackage'

export default {
  data() {
    return {
      brandId: this.$route.params.brandId || null,
      brand: {}
    }
  },
  components: {
    picView, vViewer
  },
  computed: {
  },
  activated() {
    this.getBrand()
  },
  methods: {
    getBrand() {
      if (this.brandId) {
        this.$http.get(api.BRAND_DETAIL, { id: this.brandId }).then(
          res => {
            this.brand = res.result
            this.brandId = this.brand.id
            const brandImgList = packageImgList(this.brand.picture)
            this.brand.brandPicNameList = brandImgList[0]
            this.brand.brandPicUrlList = brandImgList[1]
          }
        )
      }
    },
    setBrand() {
      if (validatenull(this.brand.name)) return this.$msg._message('请输入品牌名称', 'warning')
      if (validatenull(this.brand.brandPicNameList)) return this.$msg._message('请上传品牌图片', 'warning')
      const params = {
        id: this.brandId || null,
        name: this.brand.name,
        picture: this.brand.brandPicNameList[0]
      }
      this.$http.post(api.BRAND_EDIT, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('操作成功！', 'success')
            this.$router.push({ name: 'brand' })
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
